import React from 'react';
// import { Platform } from 'react-native';
import {createAppContainer} from 'react-navigation';
import {createStackNavigator} from 'react-navigation-stack';
import {createBottomTabNavigator} from 'react-navigation-tabs';
// import { createMaterialBottomTabNavigator } from 'react-navigation-material-bottom-tabs';
import ReactNativeHapticFeedback from 'react-native-haptic-feedback'

import colors from "../../styles/colors";
import i18n from '../../translations';
import {Icon} from '../../components/AroIconfont';
import HomeTitle from '../../components/HomeTitle';

import Home from '../home';
import Trade from '../trade';
import OTC from '../otc/OTCViewContainer';
import Balance from '../balance';
import My from '../my';

import Login from '../login';
import Register from '../register';
import Forget from '../forget';

// const tabbarCreatingFunction = Platform.select({
//   ios: createBottomTabNavigator,
//   android: createMaterialBottomTabNavigator,
// });

const HapticOptions = {
  enableVibrateFallback: true,
  ignoreAndroidSystemSettings: false
};

const TabNavigator = createBottomTabNavigator({
  [i18n.t('tabs.home')]: Home,
  [i18n.t('tabs.trade')]: Trade,
  [i18n.t('tabs.otc')]: OTC,
  [i18n.t('tabs.balance')]: Balance,
  [i18n.t('tabs.my')]: My,
}, {
  // ...Platform.OS === 'android' ? {
  // barStyle: { backgroundColor: colors.white },
  // activeColor: colors.green,
  // inactiveColor: colors.lightIconGray,
  // } : {},
  defaultNavigationOptions: ({ navigation }) => ({
    tabBarIcon: ({tintColor}) => {
      const { routeName } = navigation.state;
      let iconName;
      switch (routeName) {
        case i18n.t('tabs.trade'):
          iconName = 'iconjiaoyi';
          break;
        case i18n.t('tabs.otc'):
          iconName = 'icondollar';
          break;
        case i18n.t('tabs.balance'):
          iconName = 'iconwallet';
          break;
        case i18n.t('tabs.my'):
          iconName = 'iconmy';
          break;
        default:
          iconName = 'iconpeppaex';
      }
      return (
        <Icon name={`aroIcon|${iconName}`} size={21} color={tintColor} />
      );
    },
    tabBarOnPress: ({navigation, defaultHandler}) => {
      ReactNativeHapticFeedback.trigger('impactLight', HapticOptions);
      // 跳转到所点击页面
      // 如果未登录状态就跳转到登录页
      defaultHandler()
    }
  }),
  tabBarOptions: {
    activeTintColor: colors.green,
    inactiveTintColor: colors.lightIconGray,
    labelStyle: {
        fontSize: 10,
    },
    style: {
      // backgroundColor: 'rgba(255,255,255, .98)',
      // position: 'absolute',
      // bottom: 0,
      // left: 0,
      // right: 0,
    },
    // keyboardHidesTabBar: true,
  },
});

const screens = {
  TabNavigator: {
    screen: TabNavigator,
    navigationOptions: ({navigation}) => {
      const { routeName } = navigation.state.routes[navigation.state.index];
      let headerTitle = routeName;
      let headerStyle = {};
      let header;
      switch (routeName) {
        case i18n.t('tabs.trade'):
          header = null;
          break;
        case i18n.t('tabs.otc'):
          headerTitle = 'OTC';
          break;
        case i18n.t('tabs.balance'):
          header = null;
          break;
        case i18n.t('tabs.my'):
          header = null;
          break;
        case i18n.t('tabs.home'):
          headerTitle = <HomeTitle />;
          headerStyle = {
            borderBottomWidth: 0,
            elevation: 0,
          };
      }
      return {headerTitle, headerStyle, header};
    },
  },
  Login: {
    screen: Login
  },
  Register: {
    screen: Register
  },
  Forget: {
    screen: Forget
  }
};

const AppNavigator = createStackNavigator({
  ...screens
}, {
  initialRoute: 'TabNavigator',
  defaultNavigationOptions: {
    headerStyle:{
      borderBottomWidth: 0,
      elevation: 0,
    },
    headerTitleStyle: {
      textAlign: 'center',
      flex: 1,
      fontSize: 18,
      justifyContent: 'center',
      alignItems: 'center'
    },
    headerBackTitle: null,
  },
});

const AppContainer = createAppContainer(AppNavigator);

export default AppContainer;